<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统日志</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">
</head>
<body>

<div id="app">

    <el-row type="flex" justify="start">

        <el-col :span="10">

            <el-table :data="tableData" style="width: 100%" v-loading="loading">


                <el-table-column
                        type="index"
                        align="center"
                >
                </el-table-column>

                <el-table-column
                        label="姓名"
                        prop="userName"
                        column-key="name"
                        width="100px"
                >

                </el-table-column>

                <el-table-column
                        label="IP地址"
                        prop="ipAddress"
                        column-key="ipAddress"
                        width="200px"
                >

                </el-table-column>
                <el-table-column
                        label="登录时间"
                        prop="logTime"
                        width="200px"
                >

                </el-table-column>


            </el-table>

            <el-pagination
                    background
                    layout="prev, pager, next, total"
                    :total=page.total
                    :current-page=page.current
                    :page-size=page.size
                    @current-change="handleCurrentChange"
            >
            </el-pagination>

        </el-col>


    </el-row>

</div>


</body>
</html>
<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>
<script>

    let app = new Vue({

        el: '#app',
        data: {

            tableData: [],

            loading: false,

            page: {

                total: 0,
                current: 1,
                size: 0

            }


        },
        methods: {

            handleCurrentChange: function (current) {
                getData(current);

            },

        },


        created: getData('1')

    });


    function getData(current) {

        $.ajax({

            url: '/system/getsyslogs',
            type: 'get',
            data: {'current': current},

            success: function (result) {


                app.tableData = [];
                if (result.success === true) {

                    let resData = result.data;

                    for (let item of resData.records) {

                        item.logTime = formateDate(item.logTime);

                        app.tableData.push(item);

                    }
                    app.page.total = resData.total;
                    app.page.current = resData.current;
                    app.page.size = resData.size;

                    app.loading = false
                    // app.tableData = result.data.records()


                } else {

                    app.$notify.error({
                        title: '错误',
                        message: result.msg
                    })


                }

            }


        })


    };


    /**
     * 格式化时间 yyyy-MM-dd hh:mm:ss
     * @param dateTime
     * @returns {string}
     */
    function formateDate(dateTime) {

        let date = new Date(dateTime);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let second = date.getSeconds();

        return year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + second;

    }


</script>